<template>
  <div>
      <div id="mycharts" ></div>
      <!-- 柱状图 -->
      <div id="bar"> </div>
      <!-- 饼图 -->
      <div id="pie"></div>
  </div>
</template>

<script>
import {getWeather} from '../../api/weather'
export default {
  name: '2209vueIndex',

  data() {
    return {
      hourly_forecast:""
    };
  },
  created(){
    this.getWea();
  },
  mounted() {
    this.makeBar();
    this.makePie()
  },
  
  methods: {
    async  getWea(){
     let res=await  getWeather('廊坊');
     this.hourly_forecast=res.data.result.hourly_forecast;
     let xArr= this.hourly_forecast.map(item=>item.hour);
     let yArr= this.hourly_forecast.map(item=>item.temperature)
     console.log(xArr,yArr)
        this.makeLine(xArr,yArr);
    },
    makeLine(xAarr,yArr){ //生成折线图
       
        // 1. 初始化echarts的操作实例this.$echarts.init(dom元素)
        // console.log(this)
        let mychart=this.$echarts.init(document.getElementById("mycharts"))

        console.log(mychart,"******")
        // 2 准备echart的配置项
        // xAxis x轴的配置 type:"category" 分类 data x轴的数据
        // yAxis type:value
        // series 数据注入 data 展示的数据  type:line--折线图
        let option = {
         title:{
          text:"每小时温度",
          subtext:"由百度天气提供",
          left:"50%",
          textStyle:{
            color:"#ff0000"
          }
         },
         
        grid:{ //网格
            show:false
        },
        xAxis: { 
          type: 'category',
          data: xAarr,
           show:false
        },
        yAxis: {
          type: 'value',
          show:false
        },
        series: [
          {
            data: yArr,
            type: 'line'
          },
          // {
          //   data:[9,10,9,11,20,16,13,23,23],
          //   type: 'bar'
          // }
        ]
      };

        // 3.将配置项 设置给 ehcarts操作实例
        // 操作实例.setOption(配置项)
        mychart.setOption(option)


    },
    makeBar(){ //生成柱状图
      // 1.准备好 echarts操作实例
      let barChart=this.$echarts.init(document.getElementById("bar"));
      // 2.准备需要图行的配置项
      let option = {
        title: {
          text: '世界人口'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: { //图例组件

        },
        grid: { //网格
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [ //数据轴
          {
            name: '2011',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          },
          {
            name: '2012',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
        ]
   
      };
   // 3 将配置项设置给操作实例
      barChart.setOption(option)  
    },
    makePie(){ //饼状图
        let pieChart=this.$echarts.init(document.getElementById("pie"))
        let option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
          tooltip: { //鼠标经过的提示
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
      series: [
        {
            name: 'Access From',
            type: 'pie', //pie
            radius: '50%',
            data: [ //饼图的数据
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
    }
  ]
};
    pieChart.setOption(option)

    }

  },
};
</script>
<style lang="less">
  #mycharts{
    width:1000px;
    height:200px;
    background:skyblue;
    margin:20px auto;
  }
  #bar{
    width:900px;
    height:400px;
    background:skyblue;
    margin:20px auto;
  }
  #pie{
    width:800px;
    height:500px;
        margin:20px auto;
  }
</style>